// 1.获取首页数据
async function getDashBoard() {
  const res = await axios({
    url: '/dashboard',
  })
  console.log(res);
  const {
    overview,
    year,
    salaryData,
    groupData,
    provinceData
  } = res.data
  console.log(overview);
  // 2.渲染首页顶部数据
  for (k in overview) {
    document.querySelector(`[name=${k}]`).innerHTML = overview[k]
  }
  // 3.年度薪资曲线图
  function yearSalary(year) {
    const myChart = echarts.init(document.getElementById("line"));
    // 数据处理
    // 获取月
    const months = year.map(v => v.month);
    const salarys = year.map(v => v.salary);
    // 指定图表的配置项和数据
    const option = {
      title: {
        text: '2021全学科薪资走势'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: months,
        axisLine: {
          lineStyle: {
            color: 'gray',
            type: 'dashed'
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#d6d6d6'],
            type: 'dashed'
          }
        }
      },
      tooltip: {
        trigger: 'axis',
      },
      //控制网格
      grid: {
        left: 50
      },
      //线的颜色
      color: ['#4ba8fc'],
      series: [{
        data: salarys,
        type: 'line',
        //标记大小
        symbolSize: 15,
        //折线大小
        lineStyle: {
          width: 8
        },
        //曲线
        smooth: true,
        areaStyle: {
          //颜色渐变
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: '#4ea0ef' // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: 'white' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  yearSalary(year);
  // 4.班级薪资饼状图
  function classSalary() {
    const myChart = echarts.init(document.querySelector('#salary'));
    const data = salaryData.map(v => {
      return {
        value: v.b_count + v.g_count,
        name: v.label,
      }
    })
    const option = {
      title: {
        text: '班级薪资分布',
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: 30,
        left: 'center'
      },
      color: ['blueviolet', 'purple', 'red', 'pink', 'yellow'],
      series: [{
        name: 'Access From',
        type: 'pie',
        radius: ['57%', '70%'],
        center: ['50%', '45%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 40,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data,
      }]
    };
    myChart.setOption(option);
  }
  classSalary();
  // 5.班级每组薪资
  function groupSalary() {
    const myChart = echarts.init(document.querySelector('#lines'));
    const option = {
      xAxis: {
        type: 'category',
        // 轴线
        axisLine: {
          // 样式
          lineStyle: {
            // 虚线
            type: 'dashed',
            // 颜色
            color: '#bebebe'
          }
        },
        data: groupData[1].map(v => v.name)
      },
      // 提示框
      tooltip: {},
      // 颜色
      color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0,
              color: '#65dcb2' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#d2f0e7' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0,
              color: '#4a9fed' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#d6e7f6' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      ],
      // y轴
      yAxis: {
        type: 'value',
        // 分割线
        splitLine: {
          // 样式
          lineStyle: {
            // 虚线
            type: 'dashed'
          }
        }
      },
      // 绘图网格
      grid: {
        left: 50,
        right: 40
      },
      series: [
        // 多个图表
        {
          data: groupData[1].map(v => v.hope_salary),
          type: 'bar'
        },
        {
          data: groupData[1].map(v => v.salary),
          type: 'bar'
        }
      ]
    };
    myChart.setOption(option);
    document.querySelectorAll('#btns button').forEach(i => {
      // 每个小按钮绑定点击事件 当前小按钮高亮
      i.addEventListener('click', function () {
        document.querySelector('.btn-blue').classList.remove('btn-blue');
        this.classList.add('btn-blue');
        // 获取对应索引
        const index = this.innerHTML.trim();
        const data = groupData[index];
        option.xAxis.data = data.map(v => v.name);
        option.series[0].data = data.map(v => v.hope_salary);
        option.series[1].data = data.map(v => v.salary);
        myChart.setOption(option);
      })
    })
  }
  groupSalary();
  // 6.男女薪资分布饼状图
  function mfSalary() {
    const myChart = echarts.init(document.querySelector('#gender'));
    const option = {
      title: [{
          text: '男女薪资分布'
        },
        {
          text: '男生',
          left: 'center',
          top: '48%',
          textStyle: {
            fontSize: '15'
          }
        },
        {
          text: '女生',
          left: 'center',
          top: '88%',
          textStyle: {
            fontSize: '15'
          }
        }
      ],
      tooltip: {
        trigger: 'item'
      },
      // 颜色
      color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
      series: [{
          name: 'Access From',
          type: 'pie',
          // 内外半径
          radius: ['20%', '30%'],
          // 位置
          center: ['50%', '30%'],
          // 男生数据
          data: salaryData.map(v => {
            return {
              value: v.b_count,
              name: v.label
            }
          }),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        {
          name: 'Access From',
          type: 'pie',
          radius: ['20%', '30%'],
          center: ['50%', '70%'],
          // 女生数据
          data: salaryData.map(v => {
            return {
              value: v.g_count,
              name: v.label
            }
          }),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    myChart.setOption(option);
  }
  mfSalary();
  // ------------- 地域分布 -------------
  function initMapChart(provinceData) {
    // 基于dom元素 初始化ECharts
    const myEchart = echarts.init(document.querySelector('#map'))

    // 地域数据
    // 基于服务器的数据 筛选出要的
    // 赋值给对应的项 find includes
    const dataList = [{
        name: '南海诸岛',
        value: 0
      },
      {
        name: '北京',
        value: 0
      },
      {
        name: '天津',
        value: 0
      },
      {
        name: '上海',
        value: 0
      },
      {
        name: '重庆',
        value: 0
      },
      {
        name: '河北',
        value: 0
      },
      {
        name: '河南',
        value: 0
      },
      {
        name: '云南',
        value: 0
      },
      {
        name: '辽宁',
        value: 0
      },
      {
        name: '黑龙江',
        value: 0
      },
      {
        name: '湖南',
        value: 0
      },
      {
        name: '安徽',
        value: 0
      },
      {
        name: '山东',
        value: 0
      },
      {
        name: '新疆',
        value: 0
      },
      {
        name: '江苏',
        value: 0
      },
      {
        name: '浙江',
        value: 0
      },
      {
        name: '江西',
        value: 0
      },
      {
        name: '湖北',
        value: 0
      },
      {
        name: '广西',
        value: 0
      },
      {
        name: '甘肃',
        value: 0
      },
      {
        name: '山西',
        value: 0
      },
      {
        name: '内蒙古',
        value: 0
      },
      {
        name: '陕西',
        value: 0
      },
      {
        name: '吉林',
        value: 0
      },
      {
        name: '福建',
        value: 0
      },
      {
        name: '贵州',
        value: 0
      },
      {
        name: '广东',
        value: 0
      },
      {
        name: '青海',
        value: 0
      },
      {
        name: '西藏',
        value: 0
      },
      {
        name: '四川',
        value: 0
      },
      {
        name: '宁夏',
        value: 0
      },
      {
        name: '海南',
        value: 0
      },
      {
        name: '台湾',
        value: 0
      },
      {
        name: '香港',
        value: 0
      },
      {
        name: '澳门',
        value: 0
      }
    ]

    // 循环 及查找
    // dataList.forEach(v => {
    //   // 找到 名字开头部分相同的元素
    //   const res = provinceData.find(pv => {
    //     if (pv.name.includes(v.name)) {
    //       return true
    //     } else {
    //       return false
    //     }
    //   })
    //   // 检索之后的结果
    //   // console.log('res:', res)
    //   // 找到了对应的那个元素之后 赋值value属性
    //   if (res !== undefined) {
    //     v.value = res.value
    //   }
    // })
    // 简化版本
    dataList.forEach(v => {
      // 找到 名字开头部分相同的元素
      const res = provinceData.find(pv => pv.name.includes(v.name))
      // 检索之后的结果
      // 找到了对应的那个元素之后 赋值value属性
      // 逻辑短路 表达式1 && 表达式2 表达式1为真才会解析表达式2
      res && (v.value = res.value)
    })
    console.log('dataList:', dataList)

    let option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff'
        }
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        // 左侧虚拟导航的 数值分布
        text: ['15', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0']
        },
        show: true,
        left: 40
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)'
          }
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff'
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      series: [{
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList
      }]
    }

    // 基于选项 生成图表
    myEchart.setOption(option)
  }

  initMapChart(provinceData)
}
getDashBoard();